<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram: Blocks on a Surface</title>
</head>
<body>
    <canvas id="physicsCanvas" width="750" height="250"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Helper function to draw the force arrow F ---
        function drawForceArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 12; // length of head in pixels
            const headwidth = 8;
            ctx.save();
            ctx.lineWidth = 3; // Thicker arrow shaft
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();
            
            // filled arrowhead
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen, toy - headwidth / 2);
            ctx.lineTo(tox - headlen, toy + headwidth / 2);
            ctx.closePath();
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.restore();
        }

        // --- Helper function to draw the dimension line l ---
        function drawDimL(ctx, block1_x, block2_x, blockSize) {
            const x_start_tick = block1_x + blockSize;
            const x_end_tick = block2_x;
            
            const yLine = 85;
            const yTickTop = 75;
            const yTickBot = 95;
            const arrowheadLength = 10;
            const arrowheadWidth = 5;
            const labelGap = 15;
            const xMid = (x_start_tick + x_end_tick) / 2;

            ctx.save();
            ctx.lineWidth = 1.5;
            
            // Vertical Ticks
            ctx.beginPath();
            ctx.moveTo(x_start_tick, yTickTop);
            ctx.lineTo(x_start_tick, yTickBot);
            ctx.moveTo(x_end_tick, yTickTop);
            ctx.lineTo(x_end_tick, yTickBot);
            ctx.stroke();

            // Line segments broken by the label
            ctx.beginPath();
            ctx.moveTo(x_start_tick, yLine);
            ctx.lineTo(xMid - labelGap / 2, yLine);
            ctx.moveTo(xMid + labelGap / 2, yLine);
            ctx.lineTo(x_end_tick, yLine);
            ctx.stroke();
            
            // Left Arrowhead (filled)
            ctx.beginPath();
            ctx.moveTo(x_start_tick, yLine);
            ctx.lineTo(x_start_tick + arrowheadLength, yLine - arrowheadWidth);
            ctx.lineTo(x_start_tick + arrowheadLength, yLine + arrowheadWidth);
            ctx.closePath();
            ctx.fill();

            // Right Arrowhead (filled)
            ctx.beginPath();
            ctx.moveTo(x_end_tick, yLine);
            ctx.lineTo(x_end_tick - arrowheadLength, yLine - arrowheadWidth);
            ctx.lineTo(x_end_tick - arrowheadLength, yLine + arrowheadWidth);
            ctx.closePath();
            ctx.fill();
            
            // Label 'l'
            ctx.fillStyle = 'black';
            ctx.font = 'italic 22px Times New Roman';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('l', xMid, yLine);
            
            ctx.restore();
        }

        // --- Main Drawing ---
        
        // Drawing Parameters
        const ySurface = 160;
        const blockSize = 40;
        const l_spacing = 90;
        
        const x1 = 120;
        const yBlock = ySurface - blockSize;
        const x2 = x1 + blockSize + l_spacing;
        const x9 = 450;
        const x10 = x9 + blockSize + l_spacing;

        // Set default styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // 1. Draw the horizontal surface
        ctx.beginPath();
        ctx.moveTo(20, ySurface);
        ctx.lineTo(730, ySurface);
        // Draw hatches
        for (let i = 30; i < 730; i += 20) {
            ctx.moveTo(i, ySurface);
            ctx.lineTo(i - 10, ySurface + 10);
        }
        ctx.stroke();

        // 2. Draw the blocks and their numbers
        ctx.font = '20px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Block 1
        ctx.strokeRect(x1, yBlock, blockSize, blockSize);
        ctx.fillText('1', x1 + blockSize / 2, yBlock + blockSize / 2);
        
        // Block 2
        ctx.strokeRect(x2, yBlock, blockSize, blockSize);
        ctx.fillText('2', x2 + blockSize / 2, yBlock + blockSize / 2);
        
        // Block 9
        ctx.strokeRect(x9, yBlock, blockSize, blockSize);
        ctx.fillText('9', x9 + blockSize / 2, yBlock + blockSize / 2);

        // Block 10
        ctx.strokeRect(x10, yBlock, blockSize, blockSize);
        ctx.fillText('10', x10 + blockSize / 2, yBlock + blockSize / 2);

        // 3. Draw the ellipsis
        const ellipsisX = (x2 + blockSize + x9) / 2;
        const ellipsisY = yBlock + blockSize / 2;
        ctx.font = 'bold 30px Arial';
        ctx.fillText('...', ellipsisX, ellipsisY - 5);

        // 4. Draw the force F
        const forceY = yBlock + blockSize / 2;
        const forceStartX = 40;
        const forceEndX = x1 - 10;
        drawForceArrow(ctx, forceStartX, forceY, forceEndX, forceY);
        ctx.font = 'italic bold 24px Times New Roman';
        ctx.fillText('F', forceStartX + 20, forceY - 25);
        
        // 5. Draw the dimension lines 'l'
        drawDimL(ctx, x1, x2, blockSize);
        drawDimL(ctx, x9, x10, blockSize);

    </script>
</body>
</html>